<template>
	<view class="container">
		<view class="bg" :style="{ backgroundImage: 'url(' + info.album.picUrl + ')' }"></view>
		<view class="nav-bar">
			<view class="nav-bar-left">
				<u-icon name="arrow-down" size="55rpx" color="#fff" @click="goback"></u-icon>
			</view>
			<view class="nav-bar-center">私人FM</view>
			<view class="nav-bar-right">
				<u-icon name="more-dot-fill" size="55rpx" color="#fff"></u-icon>
			</view>
		</view>

		<!-- 图片和歌名等 -->
		<view class="info" v-if="lys" @click="lycs">
			<view class="info-picUrl">
				<image :src="info.album.picUrl" mode=""></image>
			</view>
			<view class="info-title">
				<text class="info-title-name">{{info.name}}</text>
				<view class="info-title-user">
					<text>{{info.artists[0].name}}</text>
				</view>
			</view>
		</view>
		<!-- 歌词 -->
		<view class="" v-else>
			<Lyrics></Lyrics>
		</view>

		<!-- 底部播放按钮 -->
		<view class="foot">
			<view class="play">
				<view class="progress">
					<view class="play-time">{{format(current)}}</view>
					<view class="slider">
						<u-slider active-color="red" :max="100" v-model:value="slideWidth" step=1
							@change="changeCurrentTime" @changing="moveing"></u-slider>
					</view>
					<view class="total-time">{{format(duration)}}</view>
				</view>

				<view class="foot_button">
					<image src="@/static/icon/Beckoning.png" class="dislike flex-c-c"></image>
					<image src="@/static/icon/Beckoning.png" class="like flex-c-c"></image>
					<!-- 播放与暂停 -->
					<image src="@/static/icon/plays.png" v-if="!audio.playing" @tap="onplay" class="paly_music">
					</image>
					<image src="@/static/icon/suspend.png" v-else @tap="onpause" @click="pauses" class="paly_music">
					</image>
					<!-- 下一首 -->
					<image src="@/static/icon/Next-song.png" class="next flex-c-c" @click="audioEnd"></image>
					<!-- 评论 -->
					<image src="@/static/songs/comment.png" class="comment flex-c-c" @click="gotocomment"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		_getPersonalFm
	} from '@/http/home.js'

	import Lyrics from '@/components/Lyrics.vue'
	
	export default {
		components: {
			Lyrics,
		},
		data() {
			return {
				value: 30,
				result: [],
				sid: "",
				lys: true, //图片和歌词切换
				innerAudio: getApp().globalData.audio,
				current: 0, //当前进度(s)
				duration: 0, //总时长(s)
				slideWidth: 0,
			};
		},
		methods: {
			//返回首页
			goback() {
				uni.navigateBack({
					data: 1
				})
			},
			//播放
			onplay() {
				this.$store.dispatch("playAudio", true)
				this.innerAudio.pause()
			},
			// 暂停
			onpause() {
				this.$store.dispatch("playAudio", false);
				this.innerAudio.play()
			},
			//切换图片和歌词
			lycs() {
				this.lys = !this.lys;
			},
			// 下一首
			audioEnd() {
				this.$store.dispatch("increasePlayIndex");
			},
			gotocomment(){
				uni.navigateTo({
					url:'/view/listcomments/listcomments?id=' + this.info.id
				})
			},
			// 时间处理
			format(num) {
				return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 -
					String(Math.floor(num % 60)).length) + Math.floor(num % 60)
			},
		},
		computed: {
			info() {
				return this.$store.getters.getCurrentSong;
			},
			audio() {
				return this.$store.state.audio;
			},
		},
		created() {
			this.innerAudio.onTimeUpdate((res) => {
				this.$store.dispatch("changeCurrentTime", this.innerAudio.currentTime);
				if (!this.seek) {
					// console.log('重新更新')
					this.current = this.innerAudio.currentTime
				}
				if (!this.duration) {
					this.duration = this.innerAudio.duration
				}
				this.$store.state.playerTiem = this.innerAudio.currentTime;
			})

			this.innerAudio.onEnded(() => {
				this.audioEnd()
			})
		},
		watch: {
			current(value) {
				if (this.duration > 0) {
					if (this.current === this.duration) {
						this.slideWidth = 100
						return
					}
					this.slideWidth = parseFloat(
						(this.innerAudio.currentTime / this.innerAudio.duration) * 100
					);
				}
			},

		},

	}
</script>

<style lang="scss" scoped>
	html,
	body {
		height: 100%;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-size: auto 100%;
		background-position: center;
		filter: blur(60px);
		z-index: -1;
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.nav-bar {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&-left,
		&-right {
			width: 65rpx;
		}

		&-center {
			font-size: 35rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.info {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&-title {
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			line-height: 65rpx;

			&-name {
				font-weight: bold;
				color: #fff;
			}

			&-user {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #999;

				.plus {
					// width: 30rpx;
					// height: 40rpx;
					height: 45rpx;
					border: 1px solid red;
				}
			}
		}
	}


	.foot {
		height: 18%;
	}

	.play {
		width: 100%;
		position: absolute;
		bottom: 0;

		.progress {
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.slider {
				flex: 1;
			}

		}

		.foot_button {
			margin: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 65rpx;
				height: 65rpx;
			}

			.paly_music {
				width: 85rpx;
				height: 85rpx;
			}
		}
	}
</style>
